<template>
  <el-form ref="url-form"
           :model="currentValue"
           :rules="rules"
           label-width="80px"
           label-position="left">
    <el-form-item :label="$t('paywall.urlform.labelname')"
                  prop="resourceName">
      <el-input v-model="currentValue.resourceName"
                :placeholder="$t('paywall.urlform.placeholdername')"></el-input>
    </el-form-item>
    <el-form-item :label="$t('paywall.urlform.labelurl')"
                  prop="resourcePath">
      <el-input v-model="currentValue.resourcePath"
                :placeholder="$t('paywall.urlform.placeholderurl')"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'UrlForm',
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      rules: {
        resourceName: [
          { required: true, message: this.$t('paywall.urlform.messagename'), trigger: 'blur', pattern: '[^ \x22]+' },
          { validator: this.validatePass, trigger: 'blur' }
        ],
        resourcePath: [
          { required: true, message: this.$t('paywall.urlform.messageurl'), trigger: 'blur', pattern: '[^ \x22]+' }
        ]
      }
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    validatePass (rule, value, callback) {
      let res = this.list.find(i => i.resourceName === value)
      if (res) {
        callback(new Error('The name already exists'))
      } else {
        callback()
      }
    }
  }
}
</script>
